<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Dom</title>
		<script src="../../py/system.js" type="text/javascript"></script>
		<script src="../../py/system/dom/element.js" type="text/javascript"></script>
		<script src="../../py/system/dom/drag.js" type="text/javascript"></script>
		<script src="../../py/system/dom/drop.js" type="text/javascript"></script>
		
		<script src="../../common/project/project.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/default.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/debug.js" type="text/javascript"></script>

	<style>
			#drag div {
				background: yellow; 
				margin: 8px;
				height: 100px;
				width: 100px;
				text-align: center;
				display: inline-block;
				line-height: 100px;
				cursor: default;
			}
			
			#drop div{
				height: 135px;
				margin: 20px;
				background: green;
			}
			
		</style>
	</head>
	<body> 
		<div id="drag">
			<div id="d1">最简单的拖动</div>
			<div id="d2">返回原地</div>
			<div id="d3">拖动事件</div>
			<div id="d4"><button>拖动句柄</button></div>
			<div id="d5">多像素拖动</div>
			<div id="d6">不能拖出外部</div>
			<div id="d7">自动刷屏</div>
		</div>
		
		<div id="drop">
			<div id="zone1"></div>
			<div id="zone2">只能感知d1 d3 </div>
		</div>
			<hr>
		<script>
			
			$('d1').setDraggable(true);

			$('d3').setDraggable(true).on('dragstart', function(e){
				trace.log("开始   ", e);
			}).on('drag', function(e){
			   	trace.log("拖动   ", e);
			}).on('dragend', function(e){
				trace.log("结束   ", e);
			});
			
			$('d2').setDraggable(true).on('dragend', Function.returnFalse);
			
			$('d4').setDraggable($('d4').find('button'));
			
			$('d5').setDraggable(true).on('drag', function(e){
				
				var STHREH = 60;
				
				var d = Py.DragDrop.Manager;
				
				var value = parseInt(d.delta.x / STHREH);
				
				if(value != d.value){
					
					d.value = value;
				}
				
				e.data.to.x = e.data.from.x + value * STHREH;
				e.data.to.y = e.data.from.y;
			});
			
			$('d6').setDraggable(true).on('drag', function(e){
				
				
				e.data.limit($('zone1').getBound()) ;
			});
			
			$('d7').setDraggable(true).on('drag', function(e){
				var d = e.target;
				
				var scroll = document.getScroll(), win = document.getSize();
				
				scroll.y = e.data.calcBound().bottom - win.y;
				
				if(scroll.y > 0){
					document.setScroll(scroll);
				}

			});
			
			
			
			$('zone1').on('dragenter', function(e){
				trace("dragenter");
				return false;
			}).on('dragover', function(e){
				//trace("dragover");
				return false;
			}).on('dragleave', function(e){
				trace("dragleave");
				return false;
			}).on('drop', function(e){
				trace("drop");
			});
			 
	 
   			new Py.DragDrop.Zone('zone2', 'd1', 'd3').on('drop', function(e){
			 	trace('drop on 2');
			 	this.append(e.data.dom.getText());
				e.data.dom.on('dragstart', Function.returnFalse);  //阻止拖动
			 })


		
		</script>
	</body>
</html>